<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>审核日志</title>
    <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../../lib/element-ui/element-ui-2.8.2.css">
    <link rel="stylesheet" href="../../lib/bootstrap-3.3.7/css/bootstrap.css">
    <link rel="stylesheet" href="../../lib/fullCalendar/css/fullCalendar.css">

    <style>


        body{
            user-select: none;
        }

    </style>


</head>
<body>

<div id="app">

    <el-row type="flex" justify="start">

        <el-col :span="10">

            <el-table
                    stripe
                    :data="tableData"
                    style="width: 90%"
                    v-loading="loading"
                    @selection-change="multipleSelect"
                    @row-click="rowClick"
            >

                <el-table-column
                        type="index"
                        align="center"
                >
                </el-table-column>


                <el-table-column label="用户id" prop="userId" align="center">

                </el-table-column>
                <el-table-column label="姓名" prop="name" align="center">

                </el-table-column>


            </el-table>


        </el-col>

        <el-col :span="14">
            <div id="calendar"></div>

        </el-col>
    </el-row>

<!--=========================审核dialog=============================-->
    <div id="logDetail" style="user-select: none">
        <el-row type="flex" justify="space-around">

            <el-col :span=10>

                <el-dialog title="审核日志" :visible.sync="visitDetail">

                    <el-form label-width="100px" label-position="right" :ref="detailForm" :model="detailForm">

                        <el-form-item label="申请人" prop="name">
                            <el-input v-model="detailForm.name" readonly></el-input>
                        </el-form-item>

                        <el-form-item label="项目">

                            <el-input v-model="detailForm.projectName" readonly></el-input>

                        </el-form-item>

                        <el-form-item label="申请时间">

                            <el-input v-model="detailForm.creatTime" readonly></el-input>

                        </el-form-item>


                        <el-form-item label="备注" prop="desc">

                            <el-input v-model="detailForm.desc" readonly></el-input>

                        </el-form-item>


                    </el-form>


                    <div slot="footer" class="dialog-footer">

                        <el-popover
                                placement="top"
                                width="250"
                                v-model="visitPop">
<!--                            <p>审核备注</p>-->

                            <el-form label-width="80px" :ref="form" label-position="top">

                                <el-form-item label="审核备注" >
                                    <el-input
                                            v-model="form.reviewDesc"
                                            placeholder="请输入内容"
                                            type="textarea"
                                            show-word-limit
                                            maxlength="100"
                                            rows="5"
                                    >

                                    </el-input>
                                </el-form-item>
                            </el-form>

                            <div style="text-align: right; margin: 0">
                                <el-button  type="danger" size="mini" @click="reviewLog('3')">拒绝</el-button>
                                <el-button type="success" size="mini" @click="reviewLog('2')">通过</el-button>
                            </div>


                            <el-button round slot="reference" v-if="detailForm.status == '1'">审核</el-button>
                            <el-button @click="visitDetail = false" round slot="reference">关闭</el-button>

                        </el-popover>
                    </div>

                </el-dialog>

            </el-col>

        </el-row>
    </div>


</div>

</body>
</html>
<script src="../../lib/jQuery-3.31/jquery-3.3.1.js"></script>
<script src="../../lib/vue/vue.js"></script>
<script src="../../lib/element-ui/elementUI-2.8.2.js"></script>
<script src="../../lib/fullCalendar/js/moment.js"></script>
<script src="../../lib/fullCalendar/js/fullCalendar.js"></script>
<script>

    let logsList = [];
    let resultData = [];

    let app = new Vue({

        el: '#app',
        data: {


            page: {
                total: 0,
                current: 1,
                size: 0
            },
            form:{
                reviewDesc: '',
            },
            detailForm: {
                name: '',
                projectName: '',
                desc: '',
                creatTime: '',
                status: ''

            },

            visitPop: false,
            visitDetail: false,
            tableData: [],
            showPagination: true,
            loading: false,
            logsList: []
            // multipleSelect: []


        },
        methods: {

            //处理点击上/下一页
            handleCurrentChange: function (current) { //val为点击之后的页


                getData(current);


            },
            rowClick: function (row, column, event) {

                sessionStorage.setItem("userId",row.userId);

                this.getEmplLogs(row.userId);

            },
            /**
             * 多选是将ID放入selectList
             * @param select
             */
            multipleSelect: function (select) {

                this.selectList = [];

                for (let item of select) {

                    this.selectList.push(item.applyId);
                }

            },

            getEmplLogs: function (userId) {

                if (userId === '') {
                    userId = sessionStorage.getItem("userId");
                }

                logsList=[];

                $.ajax({

                    url: '/empl/getmyreviewlogs',
                    type: 'get',
                    data: {'userId': userId},
                    success: function (result) {

                        if (result.success === true) {

                            resultData = result.data;

                            app.$notify.success({
                                title: '成功',
                                message: result.msg
                            });

                            for (let item of result.data) {

                                let status = item.reviewStatus;

                                if (status === '1'){
                                    logsList.push({
                                        id: item.logId,
                                        title: item.logDesc,
                                        start: formatDate(item.logTime),
                                        status: status

                                    })
                                }

                                else if (status==='2'){
                                    logsList.push({
                                        id: item.logId,
                                        title: item.logDesc,
                                        start: formatDate(item.logTime),
                                        status: status,
                                        backgroundColor: '#67C23A'

                                    })
                                }else {
                                    logsList.push({
                                        id: item.logId,
                                        title: item.logDesc,
                                        start: formatDate(item.logTime),
                                        status: status,
                                        backgroundColor: '#F56C6C'

                                    })
                                }


                            }
                            $("#calendar").fullCalendar('destroy');
                            reloadCalendar();

                        } else {

                            app.$notify.error({
                                title: '错误',
                                message: result.msg
                            })
                        }

                    }


                })


            },

            reviewLog: function(status){

                let reviewStatus = status;
                let reviewDesc = app.detailForm.desc;
                let logId = sessionStorage.getItem("logId");

                $.ajax({

                    url: '/empl/reviewLog',
                    type: 'get',
                    data: {
                        'reviewStatus': reviewStatus,
                        'reviewDesc': reviewDesc,
                        'logId': logId
                    },
                    success: function (result) {

                        if (result.success === true){

                            app.visitDetail = false;
                            app.visitPop = false;
                            app.$notify.success({
                                title: '成功',
                                message: result.msg
                            })

                            app.getEmplLogs(sessionStorage.getItem("userId"));

                        } else {

                            app.visitDetail = false;
                            app.visitPop = false;
                            app.$notify.error({
                                title: '失败',
                                message: result.msg
                            })
                        }

                    }



                })


            }


        },
        created: function () {
            getData();
            // reloadCalendar()
        }


    })

    /**
     * 获取当前页面最新数据
     * @param current
     */
    function getData(current) {
        $.ajax({

            url: '/const/getalluser',
            // data: {'current': current},
            type: 'get',

            success: function (result) {

                if (result.success === true) {

                    app.tableData = result.data
                }

            }
        })

    };


    function reloadCalendar() {

        $("#calendar").fullCalendar('destroy');

        $("#calendar").fullCalendar({

            selectable: true,//允许用户点击时间
            themeSystem: 'bootstrap3',
            height: 720,
            droppable: true,
            dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],

            header: {
                left: '',
                center: 'title',
                right: 'today, prev,next',
            },
            titleFormat: 'yyyy-MM',

            dayClick: function (date) {

            },
            eventClick: function (obj) {

                let logId = obj.id;
                sessionStorage.setItem("logId",logId);
                app.visitDetail = true;
                for (let item of resultData){
                    
                    if ( logId === item.logId){

                        app.detailForm.name = item.userName;
                        app.detailForm.desc =  item.logDesc;
                        app.detailForm.projectName = item.projectName;
                        app.detailForm.creatTime = formatDate(item.createTime);
                        app.detailForm.status = item.reviewStatus;
                    }
                    
                } 


            },

            events: logsList

        });
    }

    /**
     * 格式化时间 yyyy-MM-dd hh:mm:ss
     * @param dateTime
     * @returns {string}
     */
    function formatDate(dateTime) {

        let date = new Date(dateTime);
        let year = date.getFullYear();
        let mon = date.getMonth() + 1;
        let day = date.getDate();


        if (mon < 10) mon = '0' + mon;
        if (day < 10) day = '0' + day;

        return year + '-' + mon + '-' + day;

    }


</script>